import React,{useRef, useState} from 'react'
import style from './City.module.scss'
const City = (props) => {
    // console.log(props.list)
    const scrollRef = useRef(null)
    const [tipText,setText] = useState('') 
    const timer = useRef(null)

    const jump = (index,text) => {
      scrollRef.current.scrollTop = scrollRef.current.children[index].offsetTop
      setText(text)
      if(timer.current) clearTimeout(timer.current)
      timer.current = setTimeout(() => {
        setText('')
      },1000)
    }
  return (
    <div className={style.cityWrap}>
      <div className={style.cityList} ref={scrollRef}>
        {props.list.map(item=> 
          <div key={item.type} className={style.cityItem}>
            <p>{item.type}</p>
            <ul>
            {item.children.map(city=>
              <li key={city.cityId}>{city.name}</li>
            )}
            </ul>
          </div>
        )}
      </div>
      <div className={style.cityLetter}>
      {props.list.map((item,index)=> 
        <div key={item.type} onClick={() =>{
          jump(index,item.type)
        }}>{item.type}</div>
      )}
      </div>
      {tipText && <div className={style.tip}>{tipText}</div>}
  
    </div>
  )
}

export default City